<template>
  <el-dialog
    :modelValue="modelValue"
    @update:modelValue="updateModelValue"
    :title="title"
    width="40%"
  >
    <el-form
      ref="ruleFormEl"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="下载名称" prop="downloadFileName">
        <el-input v-model="ruleForm.downloadFileName"></el-input>
      </el-form-item>
      <el-form-item label="下载速度" prop="downloadSpeed">
        <el-input
          type="number"
          v-model.number="ruleForm.downloadSpeed"
          v-numberOnly
        ></el-input>
      </el-form-item>
      <el-form-item label="过期时间" prop="expirationTime">
        <el-date-picker
          style="width: 100%"
          :disabledDate="disabledDateFc"
          v-model="ruleForm.expirationTime"
          type="datetime"
          placeholder="请选择时间"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="canclelItem">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
export default {
  props: {
    modelValue: Boolean,
    title: {
      type: String,
      default: "添加",
    },
    defaultValue: {
      type: Object,
      default: () => {
        return {
          downloadFileName: "",
          downloadSpeed: 100,
          expirationTime: new Date(new Date().getTime() + 86400000),
        };
      },
    },
  },
  emits: ["submit"],
  setup(props, { emit }) {
    const data = reactive({
      ruleForm: {
        downloadFileName: props.defaultValue.downloadFileName,
        downloadSpeed: props.defaultValue.downloadSpeed,
        expirationTime: props.defaultValue.expirationTime,
      },
      rules: {
        downloadSpeed: [
          {
            required: true,
            message: "下载速度",
            trigger: "change",
          },
        ],
        expirationTime: [
          {
            required: true,
            message: "过期时间",
            trigger: "change",
          },
        ],
      },
    });
    const ruleFormEl = ref(null);
    function disabledDateFc(item) {
      return new Date(item).getTime() < new Date().getTime();
    }
    function updateModelValue(item) {
      emit("update:modelValue", item);
    }
    function canclelItem() {
      ruleFormEl.value.resetFields();
      updateModelValue(false);
    }
    function submitForm() {
      ruleFormEl.value.validate((valid) => {
        if (valid) {
          emit("submit", {
            item: data.ruleForm,
            clear: ruleFormEl.value.resetFields,
          });
        } else {
          return false;
        }
      });
    }
    return {
      ...toRefs(data),
      ruleFormEl,
      updateModelValue,
      canclelItem,
      submitForm,
      disabledDateFc,
    };
  },
};
</script>

<style lang="scss" scoped></style>
